﻿<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <script src="~/js/layui/layui.js"></script>
    <link href="~/js/layui/css/layui.css" rel="stylesheet" />
    <link href="~/X-admin/css/xadmin.css" rel="stylesheet" />
    <script src="~/X-admin/js/jquery.min.js"></script>
    <script src="~/X-admin/js/xadmin.js"></script>
    <script src="~/js/framework/sysframework.js"></script>
    <script src="~/js/framework/commonjs.js"></script>
</head>
<body>
    <div class="layui-card" style="padding-top:2%;padding-bottom:1%">
        <form id="pForm" class="layui-form layui-col-space5" lay-filter="pform-filter">
            <div class="layui-form-item" style="margin-left:1%">
                <div class="layui-input-group" style="float:left;">
                    <div class="layui-input-prefix">
                        客户名称
                    </div>
                    <input type="text" id="cuName" name="cuName" class="layui-input" readonly />
                </div>
                <div class="layui-input-group" style="float:left;margin-left:4%">
                    <div class="layui-input-prefix">
                        完工日期
                    </div>
                    <input type="text" id="finishDate" name="finishDate" class="layui-input" readonly />

                </div>
                <div class="layui-input-group" style="float:left;margin-left:4%">
                    <div class="layui-input-prefix">
                        计划数量
                    </div>
                    <input type="text" id="number" name="number" class="layui-input" readonly />

                </div>
            </div>
            <div class="layui-form-item" style="margin-left:1%">

                <div class="layui-input-group" style="float:left;">
                    <div class="layui-input-prefix">
                        产品名称
                    </div>
                    <input type="text" id="proName" name="proName" class="layui-input" readonly />

                </div>
                <div class="layui-input-group" style="float:left;margin-left:4%">
                    <div class="layui-input-prefix">
                        成品规格
                    </div>
                    <input type="text" id="spec" name="spec" class="layui-input" readonly />
                </div>
                <div class="layui-input-group" style="float:left;margin-left:4%">
                    <div class="layui-input-prefix">
                        材质
                    </div>
                    <input type="text" id="caizhi" name="caizhi" class="layui-input" readonly />
                </div>
            </div>
            <div class="layui-form-item" style="margin-left:1%">

                <div class="layui-input-group" style="float:left;">
                    <div class="layui-input-prefix">
                        计划备注
                    </div>
                    <input type="text" id="orderMemo" name="orderMemo" class="layui-input" style="width:450%" readonly />

                </div>
            </div>
        </form>
       
    </div>
    <div class="layui-tab" lay-filter="test-handle"  style="background-color:#fff;">
        <div id="gyDiv" >
        </div>
    </div>

    <div style="height:200px">
        <table class="layui-hide" id="list" lay-filter="list"></table>
    </div>



</body>
</html>
<script>
    var plCode = "",isRead = "0";
    $(function () {
        plCode = getUrlVariable("plCode");
        isRead = getUrlVariable("isRead");
        $("input[ name='plCode']").val(plCode);
        loadData();
        loadPlan();
        PlanGongXu();
    })
    function PlanGongXu() {
        $.ajax({
            url: "../Plan/GetPlanGx",
            type: "post",
            data: { plCode: plCode },
            success: function (data) {
                if (data.result) {
                    loadPlanGxTab(data.data,'gyDiv');
                }
            }
        });
    }
    layui.use('element', function () {
        var element = layui.element;

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function () {
            location.hash = 'test1=' + this.getAttribute('lay-id');
        });
    });
    function loadPlanGxTab(data, divId) {
        var uTitle = '';
        var uContents = '';
        var cCss = "";
        let tabClass = 'class="layui-this"';
        for (var i = 0; i < data.length; i++) {

            if (i > 0) {
                tabClass = "";
            }
            uTitle += '<li ' + tabClass + ' ">' + data[i].cName + "</li>";
       
            if (i == 0) {
                cCss = "layui-tab-item layui-show"
               
            } else {
                cCss = "layui-tab-item";
            }
            let toUrl = data[i].cValues + "?plCode=" + plCode + "&isRead=" + isRead;
            uContents += '<div  class="' + cCss + '">' +
                '<iframe scrolling="yes" id="frm' + data[i].cCode + '" name="nm' + data[i].cCode + '" frameborder="0" src="' + toUrl + '" style="width:100%;height:480px"></iframe></div>';
        }
        var contents = '<div class="layui-tab layui-tab-brief"><ul class="layui-tab-title" >' + uTitle + '</ul>' +
            '<div class="layui-tab-content">' + uContents + '</div></div>';
        $('#' + divId).empty();
        $('#' + divId).append(contents);
    }
    function loadPlan() {
        $.ajax({
            url: "../Plan/getPlanInfoByCode",
            data: { plCode: plCode },
            type: "post",
            success: function (rsl) {
                if (rsl.result) {
                    layui.use('form', function () {
                        var form = layui.form;
                        form.val('pform-filter', rsl.data[0]);
                        form.render();
                    });

                } else {
                    layer.msg(rsl.message);
                }
            }
        });
    }

    //获取计划附件
    function loadData() {
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#list'
                , height: '200'   //固定高度-即固定表头固定第一行首行
                , cols: [[ //标题栏
                    { field: 'fileName', title: '文件名称', width: 350 }
                    , { field: 'filePath', title: '图片文件', width: 130, templet: function (d) { return '<div onclick="show_img(this)" ><img src="' + d.filePath + '" ' + 'alt="" width="50px" height="50px"></a></div>'; } }

                ]], done: function (res, curr, count) {
                }
                , url: "../Plan/getDataList?dataType=file&condition=" + plCode
                , skin: 'row' //表格风格
                , even: true
                , page: false //是否显示分页
                , limits: [20, 30, 50]
                , limit: 50 //每页默认显示的数量
            });

        });
    }

    //放大图片
    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        layer.open({
            type: 1,
            title: '附件详情',
            skin: 'layui-layer-rim', //加上边框
            area: ['90%', '90%'], //宽高 t.width() t.height()
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
        });
    }

   
</script>